<template>
  <div class="box-tips">
    <span>未开始</span>
    <span>异常</span>
    <span>无匹配阶段</span>
    <span>正常</span>
    <span>暂停</span>
    <span>试运行</span>
    <span>运维</span>
    <span>结束</span>
    <span>
      <i class="el-icon-caret-bottom" style="color:red;font-size: 16px;" />当前阶段
    </span>
    <span>
      <i class="el-icon-star-on" style="color:#ea5e56;" />重点项目
    </span>
    <!-- <i class="el-icon-question">发起评审</i>
    <i class="el-icon-success">通过评审</i>
    <i class="el-icon-error">未过评审</i>-->
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.box-tips {
  span{
    padding-left: 10px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 13px;
  }
  span {
    &::before {
      content: "";
      display: inline-block;
      height: 11px;
      width: 11px;
      margin-right: 4px;
    }
    &:nth-child(1)::before {
      background: #a4a8ab;
    }
    &:nth-child(2)::before {
      background: #ea5e56;
    }
    &:nth-child(3)::before {
      background: #e0e0e0;
    }
    &:nth-child(4)::before {
      background: #4caf50;
    }
    &:nth-child(5)::before {
      background: #f59c25;
    }
    &:nth-child(6)::before {
      background: #3cbaff;
    }
    &:nth-child(7)::before {
      background: #9c27b0;
    }
    &:nth-child(8)::before {
      background: #d9b3b3;
    }
    &:nth-child(9),&:last-child {
      padding-left: 3px;
      &::before {
        width: 0;
        height: 0;
      }
    }
  }
}
</style>
